<template> 
    <view class="content">
		<u-popup :show="show" :round="10" mode="bottom">
			<view class="getuser">
				<view class="logoBox ui-cell">
					<image src="https://bpy.noogka.com/static/img/lg.png" class="logoImg" ></image>
					<view class="tipsBox">
						 <view class="tips1">登录后体验更多功能</view>
						 <view class="tips2">99%+的用户选择使用微信头像和昵称</view>
					</view>
				</view>
				<view class="userInfoBox ui-cell">
					<view class="userAvatar">
						<image :src="avatar" class="avatarImg" v-if="avatar"></image>
						<view class="mrImg" v-else>点击此处获取头像</view>
						<!-- <image src="https://bpy.noogka.com/static/img/defult.png" class="avatarImg" v-else></image> -->
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						</button> 
					</view>
					<input maxlength="0" type="nickname" placeholder="点击此处获取昵称" class="itemValue" v-module='nickname'
						@blur="blurName" @input="changenickName">
					<view class="saveBtn ui-cell" @tap="saveMsg">保存</view>
					<view class="remarks" @tap="checkxy">
					    <view class="checkbox">
							<image src="../static/img/nc.png" class="checkImg" v-if="!checkFlag"></image>
							<image src="../static/img/xz.png" class="checkImg" v-else></image>
					    </view>
					    <view>您已阅读并同意<text @tap.stop="yonghuxieyi">《用户协议》</text></view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 返回按钮 -->
		<view class="topTitle" :style="{top: top}">
			 <view style="color: #F4DEB9;" v-if="pageIndex==0">欢迎回来，会员</view>
			 <view style="color: #F4DEB9;" v-if="pageIndex==1">个人中心</view>
		</view>
		<!--首页-->
		<view class="indexBox" v-if="pageIndex==0">
			<view class="boxItem">
				<view class="titleOne">开通月卡</view>
				<view class="titleTwo">一月无限畅销享体验</view>
				<view class="boxBtn ui-cell">立即预约</view>
				<image src="../../static/img/ktyk.png" class="boxImg"></image>
			</view>
			<view class="boxItem">
				<view class="titleOne">开通年卡</view>
				<view class="titleTwo">尊享365天独享空间</view>
				<view class="boxBtn ui-cell">立即开通</view>
				<image src="../../static/img/ktnk.png" class="boxImg"></image>
			</view>
			<view class="boxItem">
				<view class="titleOne">我要体验</view>
				<view class="titleTwo">尊享365天独享空间</view>
				<view class="boxBtn ui-cell">一键拨打</view>
				<image src="../../static/img/wyty.png" class="boxImg"></image>
			</view>
		</view>
		<!--我的-->
		<view class="mineBox" v-if="pageIndex==1">
			<view class="boxItemOne ui-cell">
				<image src="" class="userAvatar"></image>
				<view class="userMsg ui-cell">
					<view class="userName">张三</view><view class="userEmail">zhangan@example</view>
				</view>
				<view class="soonBtn ui-cell" @tap="goCoach">立即预约</view>
			</view>
			<view class="vipMsg">
				<view class="vipTitle">会员信息</view>
				<view class="msgBox ui-cell">
					<view class="boxLeft">
						<view class="vipState">会员状态：有效</view>
						<view class="vipType">会员类型：全年会员</view>
						<view class="vipDate">到期时间：2024-12-21</view>
					</view>
					<view class="renewBtn ui-cell">续费会员</view>
				</view>
			</view>
			<view class="myAppointment ui-cell">
				<view class="yyleft">
					<view class="yyTitle">我的预约</view>
					<view class="yyjh">当前预约：增肌计划</view>
				</view>
				<view class="detailBtn ui-cell" @tap="goMyCoach">查看详细预约</view>
			</view>
		</view>
		<!--tabbar-->
		 <view class="tabbarBox ui-cell">
			 <view class="tabbarItem ui-cell" @tap="checkIndex(0)">
				 <image src="../../static/img/index_s.png" class="tabImg" v-if="pageIndex==0"></image>
				 <image src="../../static/img/index.png" class="tabImg" v-else></image>
				 <view class="tabTitle">首页</view>
			 </view>
			 <view class="midBtn" @tap.stop="scanCode"><image src="../../static/img/scan.png"></image></view>
			 <view class="tabbarItem ui-cell" @tap="checkIndex(1)">
				 <image src="../../static/img/mine_s.png" class="tabImg" v-if="pageIndex==1"></image>
				 <image src="../../static/img/mine.png" class="tabImg" v-else></image>
				 <view class="tabTitle">我的</view>
			 </view>
		 </view>
	</view>
</template>

<script>
export default {
    data() {
        return {
			pageIndex:0,
			top: 0,
			show:false,
			nickname:'', //昵称
			avatar:''  ,//头像
			token:''
        }
    },
    onLoad(data) {
	    if(!uni.getStorageSync('token')){
			this.getCode()
		}
    },
    onShow() {
      
    },
    mounted() {

    },
	created() {
		console.log('getMenuButtonBoundingClientRect===>', uni.getMenuButtonBoundingClientRect());
		//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.top = menuButtonInfo.top + 'px';
	},
    methods: {
		getCode() {
		    wx.login({
		        success: res => {
		            console.log(res, '返回成功'); //这里的返回值里面便包含code
					this.ajax_loginNew(res.code)
		        },
		        fail: function (res) {
		            console.log('登陆失败');
		        },
		    })
		},
		ajax_loginNew(code) {
		    this.$request.request({
		        url: 'login',
		        method: 'POST',
		        data: {
		            code:code
		        }
		    }).then(res => {
				uni.setStorageSync('token', res.data.token.token);
				this.token=res.data.token.token;
		    })
		},
		goCoach(){
			uni.navigateTo({
				url:'/pages/index/coach'
			})
		},
		goMyCoach() {
			uni.navigateTo({
				url:'/pages/index/myCoach'
			})
		},
         checkIndex(index){
			 this.pageIndex=index
		 },
		 blurName(e){
		 	this.nickname=e.target.value;
		 },
		 //保存个人信息
		 saveMsg(){
		 	if(!this.avatar){
		 		uni.showToast({
		 			icon:'none',
		 			title:'请上传头像'
		 		})
		 	}else if(!this.nickname){
		 		console.log(this.nickname,"this.nickname")
		 		uni.showToast({
		 			icon:'none',
		 			title:'请获取昵称'
		 		})
		 	}else{
		 		this.$request.request({url:'user/updateUserNa',method:'POST',data:{nickname:this.nickname,avatar:this.upavatar}}).then(res=>{
		 			console.log(res);
		 			if(res.code==200){
		 				if (this.typeCode) {
		 				    uni.navigateBack({
		 				        delta: 1 //返回层数，2则上上页
		 				    });
		 				} else {
		 				    setTimeout(() => {
		 				        uni.switchTab({ url: '/pages/index/index' });
		 				    }, 500)
		 				}
		 			}
		 		})
		 	}
		 },
		 //使用微信头像
		 onChooseAvatar(e){
		 	const { avatarUrl } = e.detail ;
		 	this.avatar=avatarUrl;
		 	uni.showLoading({
		 		title:'上传中...'
		 	})
		 	uni.uploadFile({
		 		 url: 'https://bpy.noogka.com/api/upload/fileUpload', 
		 		 filePath: avatarUrl,
		 		 name: 'file',
		 		 formData: {
		 			 name:'头像'
		 		 },
		 		 success: (res) => {
		 		  let sult=	JSON.parse(res.data);
		 		  console.log(sult);
		           this.upavatar=sult.data.file_path;	 
		 		  uni.hideLoading();
		 		  uni.showToast({
		 			  title: '上传成功！',
		 			  icon: 'none',
		 		  });
		 		 },
		 		 fail() {
		 			 uni.showToast({
		 				 title: '上传失败！',
		 				 icon: 'none',
		 			 });
		 		 }
		 	});
		 },
		 scanCode(){
			 console.log('扫一扫');
			 uni.scanCode({
			 	success: function (res) {
			 		console.log('条码类型：' + res.scanType);
			 		console.log('条码内容：' + res.result);
			 	}
			 });
		 }
    }
}
</script>

<style lang="scss">
    .content{
		width: 100%;height: 100vh;position: relative;background-color: #000000;
		.mineBox{
			width: 100%;height: auto;padding: 198rpx 20rpx 20rpx 20rpx;
			.boxItemOne{
				width: 100%;height: 228rpx;background: linear-gradient( 167deg, #EFD09E 0%, #F4DEB9 100%);border-radius: 8rpx;margin-bottom: 40rpx;justify-content: space-between;padding: 0 30rpx;
				.userAvatar{
					width: 148rpx;height: 148rpx;border-radius: 100%;margin-right: 20rpx;background-color: #FFFFFF;
				}
				.userMsg{
					flex: 1;flex-direction: column;align-items: flex-start;justify-content: center;
					.userName{
						font-size: 32rpx;color: #000;font-weight: bold;margin-bottom: 30rpx;
					}
					.userEmail{
						font-size: 28rpx;color: #666666;
					}
				}
				.soonBtn{
					width: 192rpx;height: 78rpx;justify-content: center;background: linear-gradient( 180deg, #403E3F 0%, #353031 100%);border-radius: 8rpx;justify-content: center;
					font-size: 28rpx;color: #F4DEB9;
				}
			}
			.vipMsg{
				width: 100%;height: 252rpx;background: linear-gradient( 167deg, #EFD09E 0%, #F4DEB9 100%);border-radius: 8rpx;margin-bottom: 40rpx;justify-content: space-between;padding:30rpx;
			    .vipTitle{
					width: 100%;font-size: 32rpx;color: #000;font-weight: bold;margin-bottom: 30rpx;
				}
				.msgBox{
					width: 100%;height: auto;justify-content: space-between;
					.boxLeft{
						flex: 1;
						.vipState,.vipType,.vipDate{
							font-size: 28rpx;color: #666666;margin-bottom: 20rpx;
						}
					}
					.renewBtn{
						width: 192rpx;height: 78rpx;justify-content: center;background: linear-gradient( 180deg, #403E3F 0%, #353031 100%);border-radius: 8rpx;justify-content: center;
						font-size: 28rpx;color: #F4DEB9;
					}
				}
			}
			.myAppointment{
				width: 100%;height: 148rpx;background: linear-gradient( 167deg, #EFD09E 0%, #F4DEB9 100%);border-radius: 8rpx;margin-bottom: 40rpx;justify-content: space-between;padding:30rpx;
			    .yyleft{
					flex: 1;
					.yyTitle{
						font-size: 32rpx;color: #000;font-weight: bold;margin-bottom: 20rpx;
					}
					.yyjh{
						font-size: 28rpx;color: #666666;
					}
				}
				.detailBtn{
					width: 208rpx;height: 78rpx;justify-content: center;background: linear-gradient( 180deg, #403E3F 0%, #353031 100%);border-radius: 8rpx;justify-content: center;
					font-size: 28rpx;color: #F4DEB9;
				}
			}
		}
		.getuser{
			width: 100%;height: auto;padding: 40rpx;
			.logoBox{
				width: 100%;height: auto;margin-bottom: 40rpx;
				.logoImg{
					width: 60rpx;height: 70rpx;margin-right: 20rpx;
				}
				.tipsBox{
					flex: 1;
					.tips1{
						font-size: 28rpx;color: #000;margin-bottom: 16rpx;
					}
					.tips2{
						font-size: 24rpx;color: #999;
					}
				}
			}
			.userInfoBox{
				width: 100%;height: auto;flex-direction: column;justify-content: center;padding:40rpx 0 50rpx 0;
				.userAvatar{
					width: 170rpx;height: 170rpx;margin-bottom: 40rpx;position: relative;border-radius: 100%;
					.avatarImg{
						width: 100%;height: 100%;border-radius: 100%;
					}
					.mrImg{
						width: 100%;height: 100%;border-radius: 100%;
						background-color: #ECECEC;
						font-size: 30rpx;
						padding:8rpx;
						border: 8rpx solid #FFFFFF;
						box-shadow: 0 0 14rpx #ECECEC;
						color: #666666;
						text-align: center;
						display: flex;
						align-items: center;
					}
					.avatar-wrapper{
						width: 170rpx !important;height: 170rpx !important;padding: 0;border: 0 !important;background-color: transparent !important;position: absolute;bottom: 0rpx;right: 0rpx;z-index: 999;
					}
					.avatar-wrapper::after{
						border: none;
					}
				}
				.itemValue{
					width: 504rpx;height: 82rpx;background: #F2F4F4;border-radius: 41rpx;font-size: 28rpx;color: #000;text-align: center;margin-bottom: 40rpx;
				}
				.saveBtn{
					width: 504rpx;height: 82rpx;background: #FED900;border-radius: 41rpx;font-size: 28rpx;color: #000;margin-bottom: 40rpx;font-weight: 600;justify-content: center;
				}
				.remarks {
				    display: flex;align-items: center;font-size: 12px;color: #999999;		
				    text {
				        color: #FED900;
				    }
					.checkImg{
						width: 40rpx;height: 40rpx;
					}
				}
			}
		}
		.indexBox{
			width: 750rpx;height: 100%;padding: 236rpx 20rpx 0 20rpx;
			.boxItem{
				width: 100%;height: 280rpx;background: linear-gradient( 167deg, #EFD09E 0%, #F4DEB9 100%);border-radius: 8rpx;margin-bottom: 108rpx;padding: 40rpx 30rpx;position: relative;
				.titleOne{
					width: 100%;font-size: 36rpx;color: #000000;font-weight: bold;margin-bottom: 36rpx;
				}
				.titleTwo{
					width: 100%;font-size: 28rpx;color: #6B5E46;font-weight: bold;margin-bottom: 40rpx;
				}
				.boxBtn{
					width: 590rpx;height: 78rpx;justify-content: center;background: linear-gradient( 180deg, #403E3F 0%, #353031 100%);border-radius: 8rpx;font-size: 28rpx;color: #F4DEB9;margin: 0 auto;
				}
				.boxImg{
					width: 90rpx;height: 90rpx;position: absolute;right: 30rpx;top: 30rpx;
				}
			}
		}
		.topTitle{
			width: 100%;height: 60rpx;position: absolute;left: 0;padding-left: 30rpx;line-height: 60rpx;
		}
		.tabbarBox{
			width: 750rpx;height: 150rpx;background-color: #000000;position: fixed;bottom: 0;left: 0;z-index: 9999;justify-content: center;border-top: 2px solid #F2D7AB;
			.tabbarItem{
				width: 50%;height: 150rpx;flex-direction: column;justify-content: center;
				.tabImg{
					width: 50rpx;height: 50rpx;margin-bottom: 16rpx;
				}
				.tabTitle{
					font-size: 28rpx;color: #F2D7AB;
				}
			}
			.midBtn{
				width: 102rpx;height: 102rpx;position: absolute;top: -32rpx;left: 324rpx;z-index: 999;
			}
		}
	}
</style>